<script setup lang="tsx" name="XtxTabs">
import { provide, ref, toRefs, useSlots } from 'vue'
// 使用泛型的方式接收到的是一个字符串
const { modelValue = '' } = defineProps<{
  modelValue: string
}>()
// 使用ref将这个字符串处理成响应式的数据
const activeName = ref(modelValue)
const emit = defineEmits<{
  (e: 'update:modelValue', str: string): void
  (e: 'tab-click', item: any, index: number): void
}>()
const slots = useSlots() // 使用组件时传递的插槽的数量  插槽列表
// console.log(slots.default?.()) // 默认插槽传递的五个pane面板
const arr = slots.default?.()
const panes: any[] = []
// console.log(arr)
arr?.forEach((item: any) => {
  if (item?.type?.name === 'XtxTabsPane') {
    panes.push(item)
  } else {
    console.log(1111)
    if (item?.children?.length > 0) {
      item.children.forEach((childItem: any) => {
        panes.push(childItem)
      })
    }
  }
})
// 点击面板标题切换高亮, 记录item.props.name 子传父同步给父组件
const handelClick = (item: any, index: number) => {
  // console.log(item)
  emit('update:modelValue', item.props.name)
  emit('tab-click', item, index)
  // 点击的时候实时赋值更新
  activeName.value = item.props.name
}
provide('activeName', activeName)
const VNode = () => {
  const navs = (
    <nav>
      {panes?.map((item, index) => (
        <a
          href="javascript:;"
          // 外层的{}表示是要解析变量 内层的{} 是对象
          class={{ active: item?.props?.name === modelValue }}
          onClick={() => handelClick(item, index)}
        >
          {item?.props?.label}
        </a>
      ))}
    </nav>
  )
  return <div class="xtx-tabs">{[navs, panes]}</div>
}
</script>

<template>
  <VNode></VNode>
</template>

<style lang="less">
.xtx-tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 5px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
        color: @xtxColor;
      }
    }
  }
}
</style>
